<template>
  <el-form ref="formLabelAlign" :rules="rules" label-width="140px">
    <el-row>
      <el-col :span="10">
        <el-form-item label="上级菜单" prop="username">
          <el-select v-model="formLabelAlign.state" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option v-for="item in menus" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="是否有效" prop="name">
          <el-select v-model="formLabelAlign.state" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="菜单标题" prop="username">
          <el-input v-model="formLabelAlign.username" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="菜单路径" prop="password">
          <el-input :key="passwordType" v-model="formLabelAlign.password" :type="passwordType" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="组件地址" prop="password">
          <el-input :key="passwordType" v-model="formLabelAlign.password" :type="passwordType" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="菜单图标" prop="password">
          <el-select v-model="formLabelAlign.icon" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option v-for="item in svgIcons" :value="item">
              <svg-icon :icon-class="item" class-name="disabled" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="默认显示" prop="password">
          <el-input :key="passwordType" v-model="formLabelAlign.password" :type="passwordType" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

</template>
<script>
import svgIcons from '@/views/icons/svg-icons'
import elementIcons from '@/views/icons/element-icons'
export default {
  name: 'AddMenu',
  props: {
    menus: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      svgIcons,
      elementIcons,
      rules: {},
      passwordType: 'password',
      formLabelAlign: {
        username: '',
        name: '',
        password: '',
        state: '',
        id: ''
      },
      id: 0
    }
  }
}
</script>

<style scoped>

</style>
